<template>
  <div class="search">
    <el-input v-model="searchCondition.name" placeholder="姓名" class="ant-input" />
    <el-date-picker
      v-model="searchCondition.submit_time"
      type="date"
      class="ant-input"
      placeholder="选择申请时间"
    />
    <el-select v-model="searchCondition.state" class="ant-input">
      <el-option v-for="item in stateOptions" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-select v-model="searchCondition.gender" class="ant-input">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
    <el-button type="primary" icon="el-icon-search" @click="searchClick">查询</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchCondition: {
        gender: '',
        state: '',
        submit_time: '',
        name: ''
      },
      stateOptions: [
        { value: '', label: '请选择审核状态' },
        { value: 'wait', label: '等待审核' },
        { value: 'success', label: '审核成功' },
        { value: 'fail', label: '审核失败' }
      ],
      options: [
        { value: '', label: '请选择性别' },
        { value: 0, label: '女' },
        { value: 1, label: '男' }
      ]
    }
  },
  methods: {
    searchClick() {
      this.$emit('searchClick', this.searchCondition)
    }
  }
}
</script>
  <style lang="scss" scoped>
  .search{
    margin: 20px 0;
    .ant-input {
      width: 240px;
      margin:10px 10px 10px 0;
  }
  }
  
  </style>
